<template>
  <div id="rtList">
    <el-input size="small" @keyup.enter.native="searchHandle" style="width: 300px" v-model="keywords"
              placeholder="搜索简历模板、发布者名称"></el-input>
    <el-button @click="searchHandle()" style="margin-left: 10px" type="primary" icon="el-icon-search" size="small">搜索
    </el-button>
    <el-button type="primary" size="small" icon="el-icon-plus" @click="addRT">添加简历模板</el-button>
    <el-table
        height="536"
        :data="rtList"
        v-loading="loading"
        element-loading-text="拼命加载中"
        style="width: 99.5%">
      <el-table-column
          label="序号"
          align="center"
          type="index"
          :index="indexMethod">
      </el-table-column>
      <el-table-column
          label="模板名称"
          prop="name"
          align="center"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          label="模板图片"
          align="center"
          show-overflow-tooltip>
        <template slot-scope="scope" >
          <el-image :src="scope.row.coverUrl"   style="height:45px;width:30%"></el-image>
        </template>
      </el-table-column>
      <el-table-column
          label="下载限制"
          align="center"
          show-overflow-tooltip>
        <template slot-scope="scope">
          {{scope.row.pay==0?'免费':'会员'}}
        </template>
      </el-table-column>
      <el-table-column
          label="发布者"
          prop="adminName"
          align="center"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          label="下载链接"
          align="center"
          show-overflow-tooltip>
        <template slot-scope="scope">
          <el-link :href="scope.row.downloadUrl" icon="el-icon-download"></el-link>
        </template>
      </el-table-column>
      <el-table-column
          label="状态"
          align="center"
          show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.state == 1 ? '上架' : '下架' }}
        </template>
      </el-table-column>
      <el-table-column
          label="发布时间"
          prop="createTime"
          sortable
          align="center"
          width="170%"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          label="操作"
          align="center"
          width="240%">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="light" content="编辑" placement="top" >
            <el-button  style="margin-left: 10px" @click="editRT(scope.row)" type="warning" size="mini" icon="el-icon-edit"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="light" content="上架" placement="top" >
            <el-button v-show="scope.row.state == 0" style="margin-left: 10px" @click="disableHandle(scope.row.resumeTemplateId,scope.row.name,scope.row.state)" type="warning" size="mini" class="iconfont icon-xiajiaxiawu"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="light" content="下架" placement="top" >
            <el-button v-show="scope.row.state == 1" @click="disableHandle(scope.row.resumeTemplateId,scope.row.name,scope.row.state)" type="success" size="mini" class="iconfont icon-shangjia"></el-button>
          </el-tooltip>
          <el-tooltip v-show="level==1" class="item" effect="light" content="删除" placement="top" >
            <el-button @click="deleteHandle(scope.row.resumeTemplateId,scope.row.name)" size="mini" icon="el-icon-delete"
                       type="danger"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="编辑简历模板" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="简历模板名称" label-width="100" >
          <el-input v-model="form.name" style="width: 400px" show-word-limit maxlength="15"></el-input>
        </el-form-item>
        <el-form-item label="简历模板限制" label-width="150" >
          <el-select v-model="form.pay" >
            <el-option label="免费" value="0"></el-option>
            <el-option label="会员" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveRT">保存</el-button>
      </div>
    </el-dialog>
    <el-pagination
        background
        layout="total,prev, pager, next"
        :total="total"
        align="center"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :hide-on-single-page="value"
        style="padding-top: 15px"
    >
    </el-pagination>
  </div>
</template>

<script>
import {delRT, editResumeTemplate, getRTList, shelveRT,} from "../../network/admin";

export default {
  name: "ResumeTemplateList",
  data() {
    return {
      rtList: [],
      rt: {},
      loading: true,
      keywords: '',
      value: false,
      currentPage: 1,
      total: 1,
      pageSize: 9,
      detailInfoVisible: false,
      level:'',
      form:{
        id:'',
        name:'',
        pay:''
      },
      dialogFormVisible:false
    }
  },
  created() {
    this.handleCurrentChange(this.currentPage);
    console.log(localStorage.getItem("admin_adminLevel"))
    this.level=localStorage.getItem("admin_adminLevel");
  },
  methods: {
    handleCurrentChange(currentPage) {
      getRTList(this.keywords, currentPage, this.pageSize).then(res => {
        this.loading = false;
        this.total = res.data.data.total;
        this.rtList = res.data.data.list;
        this.currentPage = currentPage;
      })
    },
    searchHandle() {
      this.currentPage = 1;
      this.handleCurrentChange(this.currentPage)
    },
    deleteHandle(resumeTemplateId, name) {
      this.$confirm('你确定要删除简历模板"' + name + '"吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delRT(resumeTemplateId).then(res => {
          this.$message.success('简历模板' + name + res.data.data);
          this.handleCurrentChange(this.currentPage)
        })
      }).catch((error) => {
        console.log(error)
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },
    disableHandle(resumeTemplateId, name, state) {
      shelveRT(resumeTemplateId).then(res => {
        if (res.data.code == 100) {
          this.$message.success('简历模板' + name + (state == 1 ? '下架' : '上架') + '成功');
        }
        this.handleCurrentChange(this.currentPage)
      }).catch()
    },
    indexMethod(index) {
      return (this.currentPage - 1) * this.pageSize + 1 + index;
    },
    detailInfo(rt) {
      this.detailInfoVisible = true;
      this.rt = rt;
    },
    addRT(){
      this.$router.push({name: 'addResumeTemplate'});
   },
    editRT(rt){
      this.form.pay = rt.pay==0?'免费':'会员';
      this.form.id = rt.resumeTemplateId;
      this.form.name = rt.name;
      this.dialogFormVisible=true;
    },
    saveRT(){
      editResumeTemplate(this.form.id, this.form.name, this.form.pay).then(res => {
        if(res!=null&&res.data.code == 100){
          this.$message.success("编辑成功");
          this.form.pay='';
          this.form.id='';
          this.form.name='';
          this.dialogFormVisible=false;
          this.searchHandle();
        }else{
          this.$message.danger("编辑失败");
          this.form=[];
          this.dialogFormVisible=false;
        }
      })
    }

}}
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  min-width: 130px;
  height: 50px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-left: 50px;
  margin-bottom: 0;
  width: 40%;
}

.el-form-item__content {
  height: 50px;
}
</style>